<template>
    <el-row class="service">
        <div class="list">
            <el-col :span="16" :offset="4">
                <el-row class="contain tac">
                    <el-col :span="6" v-for="(item, index) in list" :key="index" v-show="item.display" :class="[active == index ? 'setCenter': 'setNormal']">
                    	<div class="item" @click="setActive(index)">
	                        <img :src="item.icon" alt="" width="60">
	                        <div>{{item.label}}</div>
                    	</div>
                        <ul :class="['subject', active == index ? 'item-show' : 'item-hide']">
                            <li v-for="(sub, key) in item.sub" :key="key">{{sub}}</li>
                            <li @click="setNormalClass" class="back">返回</li>
                        </ul>
                    </el-col>
                </el-row>
            </el-col>
        </div>
    </el-row>
</template>
<script>
export default {
    data: function() {
        return {
            list: [{
                label: '电影级视频制作',
                icon: '/img/s-icon1.png',
                sub: ['宣传片', '广告', '短视频', '轻综艺', '录直播'],
                display: true
            }, {
                label: '专业媒体营销',
                icon: '/img/s-icon2.png',
                sub: ['微博营销', '抖音营销'],
                display: true
            }, {
                label: '自媒体广告',
                icon: '/img/s-icon3.png',
                sub: ['微博广告', '抖音广告'],
                display: true
            }, {
                label: 'IP矩阵',
                icon: '/img/s-icon4.png',
                sub: ['自有IP'],
                display: true
            }],
            active: -1,
        }
    },
    methods: {
    	setActive: function(index){
    		this.changeActive(index)
    	},
    	setNormalClass: function () {
    		this.changeActive(-1)
    	},
    	changeActive(index) {
    		this.active = index
    		if(index >= 0){
	    		for (var i in this.list){
					this.list[i].display = i == index
	    		}
    		} else {
    			this.list.forEach(item => item.display = true)
    		}
    	}
    }
}

</script>
<style scoped>
.service {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    height: calc(100vh - 80px);
}

.list {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.item{
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.subject {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.subject li {
    line-height: 2;
}
.item-show{
	opacity: 1;
    transition: all .5s linear;

}
.item-hide{
	opacity: 0;
}
.contain{
	position: relative;
}
.setCenter{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.setNormal{
}
.back{
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

</style>
